<template>
    <div class="left">
        <div class="top">
            <BorderBox2>
                <dv-border-box-4 :reverse="true" :color="[' #0b254f', ' #0b254f']">
                    <div style="padding:20px;">
                        <dv-border-box-12 style="width: 94%;padding: 18px 25px;font-weight: 900;font-size: 20px;"
                            :color="['#02a7f0', '#02a7f0']">政务新媒体排行</dv-border-box-12>
                    </div>
                    <!-- 表格 -->
                    <table cellspacing="0" cellpadding="0" width="90%">
                        <thead style="background-color: #0b254f;color: white;">
                            <tr>
                                <th>排名</th>
                                <th>名称</th>
                                <th>类型</th>
                                <th>更新数</th>
                                <th>点赞数</th>
                                <th>最后更新时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr align="center">
                                <td>
                                    <span>1</span>
                                </td>
                                <td>新媒体1</td>
                                <td>微博</td>
                                <td>123456</td>
                                <td>99</td>
                                <td>2023-08-01</td>

                            </tr>
                            <tr align="center" style="background-color: rgb(11, 37, 79,0.5);">
                                <td>
                                    <span>2</span>
                                </td>
                                <td>新媒体2</td>
                                <td>微信</td>
                                <td>123456</td>
                                <td>99</td>
                                <td>2023-08-01</td>

                            </tr>
                            <tr align="center">
                                <td>
                                    <span>3</span>
                                </td>
                                <td>新媒体3</td>
                                <td>抖音</td>
                                <td>123456</td>
                                <td>99</td>
                                <td>2023-08-01</td>
                            </tr>
                            <tr align="center" style="background-color: rgb(11, 37, 79,0.5);">

                                <td>4</td>
                                <td>新媒体4</td>
                                <td>微信</td>
                                <td>123456</td>
                                <td>99</td>
                                <td>2023-08-01</td>
                            </tr>
                            <tr align="center">
                                <td>5</td>
                                <td>新媒体5</td>
                                <td>微博</td>
                                <td>123456</td>
                                <td>99</td>
                                <td>2023-08-01</td>
                            </tr>
                        </tbody>
                    </table>
                </dv-border-box-4>
            </BorderBox2>
        </div>
        <div class="top">
            <BorderBox2>
                <dv-border-box-4 :reverse="true" :color="[' #0b254f', ' #0b254f']">
                    <div style="padding:20px;">
                        <dv-border-box-12 style="width: 94%;padding: 18px 25px;font-weight: 900;font-size: 20px;"
                            :color="['#02a7f0', '#02a7f0']">政务新媒体更新超时情况</dv-border-box-12>
                    </div>
                    <!-- 表格 -->
                    <table cellspacing="0" cellpadding="0" width="90%">
                        <thead style="background-color: #0b254f;color: white;">
                            <tr>
                                <th>名称</th>
                                <th>类型</th>
                                <th>最后更新时间</th>
                                <th>更新状态</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr align="center">
                                <td>新媒体1</td>
                                <td>微博</td>
                                <td>2023-08-01</td>
                                <td><span class="red">已超时5天</span></td>
                            </tr>
                            <tr align="center" style="background-color: rgb(11, 37, 79,0.5);">
                                <td>新媒体2</td>
                                <td>微信</td>
                                <td>2023-08-01</td>
                                <td><span class="red">已超时5天</span></td>

                            </tr>
                            <tr align="center">
                                <td>新媒体3</td>
                                <td>抖音</td>
                                <td>2023-08-01</td>
                                <td><span class="red">已超时5天</span></td>

                            </tr>
                            <tr align="center" style="background-color: rgb(11, 37, 79,0.5);">
                                <td>新媒体4</td>
                                <td>微信</td>
                                <td>2023-08-01</td>
                                <td><span class="yellow">还剩2天到期</span></td>

                            </tr>
                            <tr align="center">
                                <td>新媒体5</td>
                                <td>微博</td>
                                <td>2023-08-01</td>
                                <td><span class="yellow">还剩2天到期</span></td>
                            </tr>
                        </tbody>
                    </table>
                </dv-border-box-4>
            </BorderBox2>
        </div>
        <div class="top">
            <BorderBox2>
                <dv-border-box-4 :reverse="true" :color="[' #0b254f', ' #0b254f']">
                    <div style="padding:20px;">
                        <dv-border-box-12 style="width: 94%;padding: 15px 25px;font-weight: 900;font-size: 20px;"
                            :color="['#02a7f0', '#02a7f0']">政务新媒体更新超时情况</dv-border-box-12>
                    </div>
                    <!-- 表格 -->
                    <table cellspacing="0" cellpadding="0" width="90%">
                        <thead style="background-color: #0b254f;color: white;">
                            <tr>
                                <th>名称</th>
                                <th>类型</th>
                                <th>严重错误</th>
                                <th>一般错误</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr align="center">
                                <td>新媒体1</td>
                                <td>微博</td>
                                <td><span class="red">10</span></td>
                                <td><span class="yellow">5</span></td>


                            </tr>
                            <tr align="center" style="background-color: rgb(11, 37, 79,0.5);">
                                <td>新媒体2</td>
                                <td>微信</td>
                                <td><span class="red">10</span></td>
                                <td><span class="yellow">5</span></td>
                            </tr>
                            <tr align="center">
                                <td>新媒体3</td>
                                <td>抖音</td>
                                <td><span class="red">10</span></td>
                                <td><span class="yellow">5</span></td>
                            </tr>
                            <tr align="center" style="background-color: rgb(11, 37, 79,0.5);">
                                <td>新媒体4</td>
                                <td>微信</td>
                                <td><span class="red">10</span></td>
                                <td><span class="yellow">5</span></td>
                            </tr>
                            <tr align="center">
                                <td>新媒体5</td>
                                <td>微博</td>
                                <td><span class="red">10</span></td>
                                <td><span class="yellow">5</span></td>
                            </tr>
                        </tbody>
                    </table>
                </dv-border-box-4>
            </BorderBox2>
        </div>
    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.left {
    padding: 10px;
    width: 100%;

    .top {
        width: 604px;
        height: 310px;
        margin-bottom: 5px;
        table {
            transform: translate(3%, -5%);
            tr {
                height: 34px;
            }
            td span{
                padding: 3px 10px;
                background-color: #183a90;
            }
            td .red {
                padding: 3px 10px;
                background-color: #a30014;
                border-radius: 5px;
            }
            td .yellow {
                padding: 3px 10px;
                background-color: #d27a13;
                border-radius: 5px;
            }


        }
    }
}
</style>